/**
 * 产品概述组件
 * 展示产品定位、核心价值、核心功能等信息
 */

import { motion } from "framer-motion";

interface ProductSectionProps {
    sectionRef: (el: HTMLElement | null) => void;
}

export default function ProductSection({ sectionRef }: ProductSectionProps) {
    return (
        <section
            ref={sectionRef}
            className="py-20 bg-gradient-to-br from-blue-50 to-indigo-50">
            <div className="max-w-7xl mx-auto px-6">
                <motion.div
                    initial={{
                        opacity: 0,
                        y: 20
                    }}
                    whileInView={{
                        opacity: 1,
                        y: 0
                    }}
                    transition={{
                        duration: 0.6
                    }}
                    viewport={{
                        once: true
                    }}>
                    <h2 className="text-3xl md:text-4xl font-bold text-center mb-16">产品概述</h2>
                </motion.div>
                
                <div className="grid md:grid-cols-2 gap-12 items-center">
                    {/* 左侧内容 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: -30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6
                        }}
                        viewport={{
                            once: true
                        }}>
                        <p className="text-lg text-gray-700 mb-8 leading-relaxed">
                            基于大模型微调的智能简历解析系统，实现高效、准确的简历信息提取与人岗匹配，为企业招聘团队提供AI驱动的人才筛选解决方案。
                        </p>
                        
                        <div className="bg-white rounded-2xl shadow-xl p-8 mb-8 transform transition-all duration-300 hover:shadow-2xl">
                            <h3 className="text-xl font-bold text-indigo-700 mb-4">产品定位</h3>
                            <p className="text-gray-600">
                                面向企业招聘团队的AI驱动简历解析工具，通过微调的小模型实现高性能、高准确率、低延迟的简历信息提取与结构化，支持多语言、多格式，解决传统解析方案效率低下、准确率不足的痛点。
                            </p>
                        </div>
                        
                        <div className="bg-white rounded-2xl shadow-xl p-8 transform transition-all duration-300 hover:shadow-2xl">
                            <h3 className="text-xl font-bold text-indigo-700 mb-6">核心价值</h3>
                            <ul className="space-y-5">
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-3 rounded-full mr-4 flex-shrink-0">
                                        <i className="fa-solid fa-tachometer-alt text-indigo-600 text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 className="font-semibold text-gray-800 text-lg">高效处理</h4>
                                        <p className="text-gray-600 mt-1">单份简历解析时间≤10秒，比传统方案提速10倍</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-3 rounded-full mr-4 flex-shrink-0">
                                        <i className="fa-solid fa-bullseye text-indigo-600 text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 className="font-semibold text-gray-800 text-lg">精准识别</h4>
                                        <p className="text-gray-600 mt-1">中英文核心字段解析F1值≥95%，支持多语言场景</p>
                                    </div>
                                </li>
                                <li className="flex items-start">
                                    <div className="bg-indigo-100 p-3 rounded-full mr-4 flex-shrink-0">
                                        <i className="fa-solid fa-coins text-indigo-600 text-lg"></i>
                                    </div>
                                    <div>
                                        <h4 className="font-semibold text-gray-800 text-lg">成本可控</h4>
                                        <p className="text-gray-600 mt-1">微调小模型降低计算资源消耗，运营成本降低70%</p>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </motion.div>
                    
                    {/* 右侧功能网格 */}
                    <motion.div
                        initial={{
                            opacity: 0,
                            x: 30
                        }}
                        whileInView={{
                            opacity: 1,
                            x: 0
                        }}
                        transition={{
                            duration: 0.6,
                            delay: 0.2
                        }}
                        viewport={{
                            once: true
                        }}>
                        <h3 className="text-2xl font-bold text-indigo-700 mb-8">核心功能</h3>
                        <div className="grid grid-cols-2 gap-6">
                            <motion.div
                                className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                whileHover={{
                                    scale: 1.03
                                }}>
                                <div className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-file-alt text-indigo-600 text-xl"></i>
                                </div>
                                <h4 className="font-semibold text-gray-800 mb-2">多格式支持</h4>
                                <p className="text-sm text-gray-600">支持PDF、Word、图片等15+种文件格式，兼容扫描件与复杂排版</p>
                            </motion.div>
                            
                            <motion.div
                                className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                whileHover={{
                                    scale: 1.03
                                }}>
                                <div className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-language text-indigo-600 text-xl"></i>
                                </div>
                                <h4 className="font-semibold text-gray-800 mb-2">多语言解析</h4>
                                <p className="text-sm text-gray-600">支持中英日韩等多国语言简历，解决国际化招聘需求</p>
                            </motion.div>
                            
                            <motion.div
                                className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                whileHover={{
                                    scale: 1.03
                                }}>
                                <div className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-database text-indigo-600 text-xl"></i>
                                </div>
                                <h4 className="font-semibold text-gray-800 mb-2">细颗粒度提取</h4>
                                <p className="text-sm text-gray-600">提取100+维度信息，包括基本信息、工作经历、教育背景、技能等</p>
                            </motion.div>
                            
                            <motion.div
                                className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                whileHover={{
                                    scale: 1.03
                                }}>
                                <div className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-brain text-indigo-600 text-xl"></i>
                                </div>
                                <h4 className="font-semibold text-gray-800 mb-2">智能匹配</h4>
                                <p className="text-sm text-gray-600">基于语义理解的人岗匹配算法，精准推荐合适人选</p>
                            </motion.div>
                            
                            <motion.div
                                className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                whileHover={{
                                    scale: 1.03
                                }}>
                                <div className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-chart-line text-indigo-600 text-xl"></i>
                                </div>
                                <h4 className="font-semibold text-gray-800 mb-2">数据分析</h4>
                                <p className="text-sm text-gray-600">人才画像与数据可视化，辅助招聘决策</p>
                            </motion.div>
                            
                            <motion.div
                                className="bg-white rounded-xl shadow-lg p-6 text-center transform transition-all duration-300 hover:shadow-xl hover:-translate-y-1"
                                whileHover={{
                                    scale: 1.03
                                }}>
                                <div className="bg-indigo-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
                                    <i className="fa-solid fa-plug text-indigo-600 text-xl"></i>
                                </div>
                                <h4 className="font-semibold text-gray-800 mb-2">系统集成</h4>
                                <p className="text-sm text-gray-600">提供API接口，无缝对接现有招聘系统</p>
                            </motion.div>
                        </div>
                    </motion.div>
                </div>
            </div>
        </section>
    );
}